<template>
  <div class="header">
    <div class="slogan">
      <p>快乐挠头每一天 | 此网站仅为个人提供学习开发</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="http://r0smp2e4j.hd-bkt.clouddn.com/swim.png" style="width: 56%" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/')" :class="{active: url_path === '/'}">首页</span>
        </li>
        <li class="ele">
          <span @click="goPage('/new')" :class="{active: url_path === '/new'}">新闻中心</span>
        </li>
        <li class="ele">
          <span @click="goPage('/vip')" :class="{active: url_path === '/vip'}">加入会员</span>
        </li>
        <li class="ele">
          <span @click="goPage('/course')" :class="{active: url_path === '/course'}">游泳培训</span>
        </li>
        <li class="ele">
          <span @click="goPage('/teacher')" :class="{active: url_path === '/teacher'}">教练风采</span>
        </li>
        <li class="ele">
          <span @click="goPage('/problem')" :class="{active: url_path === '/problem'}">常见问题</span>
        </li>
        <li class="ele" v-show="is_show">
          <span @click="goPage('/userinfo')" :class="{active: url_path === '/userinfo'}">个人中心</span>
        </li>

      </ul>

      <div class="right-part">
        <div v-if="!token">
          <span @click="put_login">登录</span>
          <span class="line">|</span>
          <span @click="put_register">注册</span>
        </div>
        <div v-else>
          <span>{{ username }}</span>
          <span class="line">|</span>
          <span @click="logout">注销</span>
        </div>
      </div>
    </div>
    <Login v-if="is_login" @close="close_login" @go="put_register" @success="success_login"/>
    <Register v-if="is_register" @close="close_register" @go="put_login"/>
  </div>
</template>

<script>
import Login from './Login'
import Register from "./Register"

export default {
  name: "Header",
  data() {
    return {
      is_show: false,
      url_path: sessionStorage.url_path || '/',
      token: '',
      username: '',
      is_login: false,
      is_register: false,
      is_search_tip: true,
      search_placeholder: '',
      search_word: ''
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
    put_login() {
      this.is_login = true;
      this.is_register = false;
    },
    put_register() {
      this.is_login = false;
      this.is_register = true;
    },
    close_login() {
      this.is_login = false;
    },
    close_register() {
      this.is_register = false;
    },
    success_login(data) {
      this.is_login = false;
      this.username = data.username;
      this.token = data.token;
    },
    logout() {
      this.token = '';
      this.username = '';
      this.$cookies.remove('username');
      this.$cookies.remove('token');
      this.is_show = false
    },
  },
  created() {
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;

    // 检测cookies，查看登录状态
    this.username = this.$cookies.get('username');
    this.token = this.$cookies.get('token');
    if (this.$cookies.get('username').length != 0) {
      this.is_show = true
    }
  },
  components: {
    Login,
    Register,
  }
}
</script>

<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;
}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 1px;
  margin-left: 20px;
}

.ele {
  margin: 20px;
}

.ele span {
  display: block;
  font: 17px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  font: 17px/36px '微软雅黑';
  line-height: 108px;
  cursor: pointer;
  border-bottom: 2px solid transparent;

}
</style>